<template>
  <div class="">
    <el-container>
      <el-header
        ><Head></Head>
        <div class="head">
          <div class="w1200">
            <div class="logo"><a href="#"></a></div>
            <div class="search">
              <form action="#" class="form">
                <input
                  type="text"
                  v-model="findName"
                  name="keyword"
                  class="txt"
                  onfocus="if(value=='输入商品关键字') {value=''}"
                  onblur="if(value=='') {value='输入商品关键字'}"
                />
                <input
                  type="button"
                  value="搜索"
                  class="sub"
                  @click="searchName(findName)"
                />
              </form>
              <p>
                <a
                  v-for="(type, i) in types"
                  :key="i"
                  href="javascript:void(0)"
                  @click="search(type)"
                  id="searchType"
                  >{{ type }}</a
                >
              </p>
            </div>
            <div class="clear"></div>
          </div>
        </div>
      </el-header>
      <el-main class="main">
        <div>
          <div class="goodsinfo">
            <ul class="itemsTable">
              <!-- 渲染商品列表数据 -->
              <li v-for="(item, i) in items" :key="i">
                <!-- 商品图片渲染 -->
                <div
                  class="pic"
                  style="text-align: center;"
                  v-for="(info, j) in item.itemInfoDOList"
                  :key="j"
                  v-if="j == 0"
                >
                  <a href="#"
                    ><img
                      :src="
                        'data:image/jpg;base64,' +
                         info.itemInfoImg
                      "
                      height="100px"
                      width="100px"
                  /></a>
                </div>
                <!-- 渲染商品名称价格等描述 -->
                <div
                  class="goodsDesc"
                  @click="showItem(item.itemId)"
                  style="cursor: pointer;"
                >
                  <div class="goodsname">
                    <font>商品名：</font>{{ item.itemName }}
                  </div>
                  <div class="goodsprice">
                    <font>价格：</font>{{ item.itemPrice }}
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </el-main>
      <div style="margin-left:25%">
        <Pagination
          :paginationObject="pagination"
          :paginationMethod="setItemsTable"
        ></Pagination>
      </div>
      <!-- <el-footer>Footer</el-footer> -->
    </el-container>
  </div>
</template>

<script>
import Head from "../cart/head";
import { getItems } from "../../service/cart";
import { mapState, mapActions, mapMutations } from "vuex";
import Pagination from "../../components/Pagination";
export default {
  components: {
    Head,
    Pagination,
  },
  data() {
    return {
      // items: [],
      findName: "请输入商品关键字",
      src: "",
      price: "",
      count: 0,
      goodsList: [],
      types: [
        "全部商品",
        "iphone12",
        "面膜",
        "婚床用品",
        "运动鞋",
        "连衣裙",
        "眼霜",
      ],
    };
  },
  computed: {
    ...mapState("cart", ["item", "items", "searchParams", "pagination"]),
  },
  methods: {
    async showItem(itemId) {
      await this.setItem(itemId);
      this.$router.push({ path: "/details" });
    },
    search(value) {
      if (value == "全部商品") {
        this.searchParams.type = "";
        this.searchParams.value = "";
        getItems(this.searchParams).then((response) => {
          this.setItems(response.data.data.list);
        });
      } else {
        this.searchParams.type = "type";
        this.searchParams.value = value;
        getItems(this.searchParams).then((response) => {
          this.setItems(response.data.data.list);
        });
      }
    },
    searchName(value) {
      if (value == "请输入商品关键字") {
        alert("请输入商品关键字");
      } else {
        this.searchParams.type = "name";
        this.searchParams.value = value;
        getItems(this.searchParams).then((response) => {
          this.setItems(response.data.data.list);
        });
      }
    },
    ...mapMutations("cart", ["setItems"]),
    ...mapActions("cart", ["setItem", "setItemsTable"]),
  },
  created() {
    this.setItemsTable();
  },
};
</script>

<style>
.head .logo {
  float: left;
  width: 415px;
  height: 80px;
  margin: 38px 150px 0 0;
}
.head .logo a {
  display: inline-block;
  width: 415px;
  height: 80px;
}
.head .search {
  float: left;
  margin: 50px 0 0 35px;
}
.head .search form {
  height: 46px;
}
.head .search .txt {
  float: left;
  color: #999;
  border: 1px solid #dedede;
  border-right: none;
  width: 415px;
  height: 43px;
  float: left;
  padding: 0 5px;
  border-radius: 3px 0 0 3px;
  font-weight: bold;
}
.head .search .sub {
  background: #ea3c1f;
  float: left;
  width: 95px;
  height: 45px;
  line-height: 42px;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
}
.head .search p {
  color: #aaa;
  margin-top: 5px;
}
.head .search p a {
  color: #aaa;
  margin: 0 8px;
}
.head .search p a:hover {
  color: #ea3c1f;
}
.head .s_r {
  float: right;
  margin-top: 50px;
}
.head .s_r dl dt {
  border: 1px solid #dedede;
  width: 95px;
  height: 45px;
  line-height: 45px;
  padding-left: 50px;
  position: relative;
  font-size: 16px;
  margin-left: 43px;
}
.head .s_r dl dt p span {
  display: inline-block;
  width: 15px;
  height: 20px;
  line-height: 15px;
  color: #fff;
  top: -10px;
  position: absolute;
  text-align: center;
  font-size: 12px;
  right: 20px;
}
.head .s_r dl dd {
  padding-left: 15px;
  margin-top: 15px;
  color: #000;
}
.head .s_r dl dd b {
  color: #ea3c1f;
  font-size: 16px;
}
.itemsTable {
  width: 1000px;
}
.itemsTable li {
  width: 180px;
  float: left;
  margin-right: 20px;
  list-style-type: none;
}
.main {
  margin-top: 130px;
}
.goodsDesc {
  text-align: center;
}
.goodsinfo {
  margin-left: 20%;
}
</style>
